<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 将所有的段落设置为红色字体

          元素选择器
              作用： 根据标签名来选中指定的元素
              语法： 标签名{}
              例子：p{} h1{} div{}
         */
         /* p{
            color: red;
         } */
          /* 
             将儿童相见不相识设置为红色

             id元素选择器

             作用： 根据元素的id属性来选中指定的元素
             语法： #id属性值{}
             例子：#box{} #red{}
          */
          /* #cxk{
            color: red;
          } */
          /* 
           将秋水。。。和落霞。。 设置为蓝色
           类选择器
               作用： 根据元素的class属性来选中指定的元素
               语法： class属性值
          */
          /* .bule{
            color: blue;
          } */
           /* 
             通配选择器
               作用： 选中页面中所有的元素
               语法： *
           */
           *{
            color: red;
           }
    </style>
</head>
<body>
    <p>少小离家老大回</p>
    <p id="cxk">乡音无改鬓毛催</p>
    <p>儿童相见不相识</p>
    <p>笑问客从何处来</p>
    <!-- class 是一个标签的属性， 他和id类似，不同的是class可以重复使用
     可以通过class属性来为元素分组
     可以同时为一个元素指定多个class属性 -->
    <p class="bule">落霞与孤鹜齐飞</p>
    <p class="bule">秋水共长天一色</p>
</body>
</html>